<template>
  <div id="tmpl">
      <!-- 图片分类 -->
      <div id="cate">
          <ul v-bind="{style:'width:'+ulwidth+'px'}">
              <li @click="getimgs(0)">全部</li>
              <li v-for="item in cates" @click="getimgs(item.id)">{{item.title}}</li>
          </ul>
      </div> 
      <!-- 图片列表 -->
      <div id="imglist">
          <ul>
              <li v-for="item in list">
                  <router-link v-bind="{to:'/photo/photoinfo/'+item.id}">
                  <img v-lazy="item.img_url">
                  <div id="desc">
                      <h5 v-text="item.title"></h5>
                      <p v-text="item.zhaiyao"></p>  
                  </div>
                  </router-link>
              </li>
          </ul>
      </div>
  </div>
</template>

<script>
import common from '../../kits/common';
import {Toast} from 'mint-ui';
export default {
  data(){
      return{
          cates:[],
          ulwidth:320,
          list:[]
      }
  },
  created(){
      //获取图片分类数据
      this.getcates();
    //获取图片数据
      var  all = 0;
      this.getimgs(all);
  },
  methods:{
      getcates(){
          //1.0 确定url
            var url = common.apidomain+'/api/getimgcategory';
            this.$http.get(url).then(function(res){
                if(res.body.status!=0){
                   Toast(res.body.message);
                   return;
                }
                this.cates = res.body.message;

                //2.0 实现当前分类数据的ul宽度 = 分类个数*li的宽度
                var w = 62;
                var count = res.body.message.length +1;
                this.ulwidth = w * count;
            })
      },
      //加载图片数据
      getimgs(cateid){
          //如果cateid参数没有传递，默认为0，代表获取所有数据
          cateid= cateid || 0;
          //确定url
          var url = common.apidomain + '/api/getimages/'+cateid;
          this.$http.get(url).then(function(res){
              if(res.body.status!=0){
                  Toast(res.body.message);
                  return;
              }
              this.list = res.body.message;
          })
      }
  }
}
</script>
 
<style scoped>
#cate{
    width: 375px;
    max-width: 375px;
    overflow-x: auto;
}
#cate ul{
    margin: 0px;
    padding-left: 10px;
}
#cate li{
    list-style: none;
    display: inline-block;
    color: #0094ff;
    font-size: 14px;
    padding-left: 6px;
    cursor: pointer;
}
/* 实现图片列表样式 */
#imglist ul{
    padding-left: 0px;
}
#imglist li{
    list-style: none;
    position: relative;
}
#imglist img{
    width: 100%;
    height: 300px;
}
#desc{
    width: 100%;
    background-color: rgba(0,0,0,.4);
    position: absolute;
    bottom:2px;
    left: 0px;
}
#desc h5{
    color:#fff;
    font-weight: 700;
}
#desc p{
    color: #fff;
}
image[lazy=loading] {
  width: 40px;
  height: 300px;
  margin: auto;
}
</style>

